keep alive

简介

将其包裹的动态组件缓存起来，避免在组件切换时重复创建和销毁，从而提高性能。

原理

当用 keep-alive 包裹一个动态组件时，它会将该组件的状态和实例缓存起来，而不是直接销毁它。这意味着组件的 mounted 和 destroyed 钩子函数只会执行一次，而不是每次切换都会执行。当再次切换到该组件时，它会从缓存中取出之前的状态和实例，重新挂载到 DOM 上，但不会重新创建。

这个特性在某些场景下非常有用，比如在路由切换或者动态组件频繁变换的情况下，可以避免不必要的性能开销，提高应用的响应速度。

和v-if、v-show区别

v-show

v-show根据条件控制元素的显示与隐藏。当条件为真时，元素会被设置为 display: block，而当条件为假时，元素会被设置为 display: none。它不会销毁元素，只是通过 CSS 来控制显示与隐藏。因此，元素的状态和数据都会保留，只是不再显示在页面上。

v-if

v-if 根据条件来切换元素的存在与否。当条件为真时，元素会被创建并插入到 DOM 中，当条件为假时，元素会被从 DOM 中移除并销毁。因此，每次切换条件时，元素的状态和数据都会重新初始化。

区别

keep-alive 在性能优化方面与 v-show 和 v-if 有明显的不同。keep-alive 通过缓存组件的实例来避免重复的创建和销毁，适用于需要频繁切换的场景。而 v-show 和 v-if 则是通过 CSS 控制元素的显示与隐藏，以及动态创建和销毁元素来实现条件切换。在使用时，根据实际场景和需求选择合适的指令或组件来优化应用的性能。